import React from 'react'
import LineProcessBar from './process.bar'
// render utils functions

export const mainHeader = () => {
  return (
    <header className="main-header">
    </header>
  )
}

export const ProcessBarGroup = (itemList) => {
  return (
    <div className="process-container">
      {itemList.map((item, index) => {
        let props = {
          proceding: item.proceding
        }
        return (
          <div key={index} className="">
            {item.label}
            <LineProcessBar {...props} />
            <span className="process-company">
              {item.pend}
            </span>
          </div>
        )
      })}
    </div>
  )
}

export const ProcessBar = item => {
  return (
    <div className="process-container">
      <div className="process-bar" style={{ width: item.ratio + '%' }} />
    </div>
  )
}
